<template>
  <div class="app-container">
    <el-steps :active="stepIndex" finish-status="success">
      <el-step title="基本设置"></el-step>
      <el-step title="表单设置"></el-step>
      <el-step title="流程设置"></el-step>
    </el-steps>

    <div class="tools-div">
      <el-button
        v-if="stepIndex > 1"
        icon="el-icon-check"
        type="primary"
        size="small"
        @click="pre()"
        round
        >上一步
      </el-button>
      <el-button
        icon="el-icon-check"
        type="primary"
        size="small"
        @click="next()"
        round
        >{{ stepIndex == 3 ? "提交保存" : "下一步" }}
      </el-button>
      <el-button type="primary" size="small" @click="back()">返回</el-button>
    </div>

    <!-- 第一步 -->
    <div v-show="stepIndex == 1" style="margin-top: 20px">
      <el-form
        ref="flashPromotionForm"
        label-width="150px"
        size="small"
        style="padding-right: 40px"
      >
        <el-form-item label="审批类型">
          <el-select
            v-model="processTemplate.processTypeId"
            placeholder="请选择审批类型"
          >
            <el-option
              v-for="item in processTypeList"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批名称">
          <el-input v-model="processTemplate.name" />
        </el-form-item>
        <el-form-item label="审批图标">
          <el-select
            v-model="processTemplate.iconUrl"
            placeholder="请选择审批图标"
          >
            <el-option
              v-for="item in iconUrlList"
              :label="item.iconUrl"
              :value="item.iconUrl"
            >
              <img
                :src="item.iconUrl"
                style="width: 30px; height: 30px; vertical-align: text-bottom"
              />
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="processTemplate.description" />
        </el-form-item>
      </el-form>
    </div>

    <!-- 第二步 -->
    <div v-show="stepIndex == 2" style="margin-top: 20px">
      <!--表单构建器-->
      <fc-designer class="form-build" ref="designer" />
    </div>

    <!-- 第三步 -->
    <div v-show="stepIndex == 3" style="margin-top: 20px">
      <el-upload
        class="upload-demo"
        drag
        action="/dev-api/admin/process/processTemplate/uploadProcessDefinition"
        :headers="uploadHeaders"
        multiple="false"
        :before-upload="beforeUpload"
        :on-success="onUploadSuccess"
        :file-list="fileList"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将Activiti流程设计文件拖到此处，或<em>点击上传</em>
        </div>
        <div class="el-upload__tip" slot="tip">
          只能上传zip压缩文件，且不超过2048kb
        </div>
      </el-upload>
    </div>
  </div>
</template>

<script>
import api from "@/api/process/processTemplate";
import processTypeApi from "@/api/process/processType";
import store from "@/store";

const defaultForm = {
  id: "",
  name: "",
  iconUrl: "",
  formProps: "",
  formOptions: "",
  processDefinitionKey: "",
  processDefinitionPath: "",
  description: "",
};
export default {
  data() {
    return {
      stepIndex: 1,
      processTypeList: [],
      processTemplate: defaultForm,
      iconUrlList: [
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1t695CFYqK1RjSZLeXXbXppXa-102-102.png",
          tag: "请假",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1bHOWCSzqK1RjSZFjXXblCFXa-112-112.png",
          tag: "出差",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1cbCYCPTpK1RjSZKPXXa3UpXa-112-112.png",
          tag: "机票出差",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1cbCYCPTpK1RjSZKPXXa3UpXa-112-112.png",
          tag: "机票改签",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png",
          tag: "外出",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1Yfa0CG6qK1RjSZFmXXX0PFXa-112-112.png",
          tag: "补卡申请",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1Y8PlCNjaK1RjSZKzXXXVwXXa-112-112.png",
          tag: "加班",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB11X99CNTpK1RjSZFKXXa2wXXa-102-102.png",
          tag: "居家隔离",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png",
          tag: "请假",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB13ca1CMDqK1RjSZSyXXaxEVXa-102-102.png",
          tag: "调岗",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1U9iBCSzqK1RjSZPcXXbTepXa-102-102.png",
          tag: "离职",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB11pS_CFzqK1RjSZSgXXcpAVXa-102-102.png",
          tag: "费用申请",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1t695CFYqK1RjSZLeXXbXppXa-102-102.png",
          tag: "用章申请",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB13f_aCQzoK1RjSZFlXXai4VXa-102-102.png",
          tag: "携章外出",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png",
          tag: "学期内分期",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1_YG.COrpK1RjSZFhXXXSdXXa-102-102.png",
          tag: "特殊学费",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1Yfa0CG6qK1RjSZFmXXX0PFXa-112-112.png",
          tag: "充值卡申领",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png",
          tag: "礼品申领",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1FNG.CMHqK1RjSZFgXXa7JXXa-102-102.png",
          tag: "邮寄快递申请",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/imgextra/i3/O1CN01LLn0YV1LhBXs7T2iO_!!6000000001330-2-tps-120-120.png",
          tag: "合同审批",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png",
          tag: "合同借阅",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png",
          tag: "魔点临时开门权限",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1bHOWCSzqK1RjSZFjXXblCFXa-112-112.png",
          tag: "北京科技园车证审批",
        },
        {
          iconUrl:
            "https://gw.alicdn.com/tfs/TB1e76lCOLaK1RjSZFxXXamPFXa-112-112.png",
          tag: "魔点访客提前预约审批",
        },
      ],

      uploadHeaders: {
        token: store.getters.token,
      },
      fileList: [],
    };
  },

  created() {
    let id = this.$route.query.id;
    console.log(id);
    if (id > 0) {
      this.fetchDataById(id);
    }
    this.fetchProcessTypeData();
  },

  methods: {
    pre() {
      this.stepIndex -= 1;
    },

    next() {
      if (this.stepIndex === 2) {
        this.processTemplate.formProps = JSON.stringify(
          this.$refs.designer.getRule()
        );
        this.processTemplate.formOptions = JSON.stringify(
          this.$refs.designer.getOption()
        );
        console.log(JSON.stringify(this.processTemplate));
      }
      if (this.stepIndex === 3) {
        this.saveOrUpdate();
      }

      this.stepIndex += 1;
    },

    fetchProcessTypeData() {
      processTypeApi.findAll().then((response) => {
        this.processTypeList = response.data;
      });
    },
    fetchDataById(id) {
      api.getById(id).then((response) => {
        this.processTemplate = response.data;
        // 给表单设计器赋值
        this.$refs.designer.setRule(JSON.parse(this.processTemplate.formProps));
        this.$refs.designer.setOption(
          JSON.parse(this.processTemplate.formOptions)
        );
        this.fileList = [
          {
            name: this.processTemplate.processDefinitionPath,
            url: this.processTemplate.processDefinitionPath,
          },
        ];
      });
    },

    saveOrUpdate() {
      this.saveBtnDisabled = true; // 防止表单重复提交
      if (!this.processTemplate.id) {
        this.saveData();
      } else {
        this.updateData();
      }
    },

    // 新增
    saveData() {
      api.save(this.processTemplate).then((response) => {
        this.$router.push("/processSet/processTemplate");
      });
    },

    // 根据id更新记录
    updateData() {
      api.updateById(this.processTemplate).then((response) => {
        this.$router.push("/processSet/processTemplate");
      });
    },

    // 文件上传限制条件
    beforeUpload(file) {
      const isZip =
        file.type === "application/x-zip-compressed" ||
        file.type === "application/zip";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isZip) {
        this.$message.error("文件格式不正确!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传大小不能超过 2MB!");
        return false;
      }
      return true;
    },

    // 上传成功的回调
    onUploadSuccess(res, file) {
      // 填充上传文件列表
      this.processTemplate.processDefinitionPath =
        res.data.processDefinitionPath;
      this.processTemplate.processDefinitionKey = res.data.processDefinitionKey;
    },

    back() {
      this.$router.push("/processSet/processTemplate");
    },
  },
};
</script>
